<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header">
    <x-header>投注记录</x-header>
    <tabs v-model="active" @change="change" :offset-top="47" swipeable sticky>
      <tab title="全部订单">
        <list v-model="loading" :immediate-check="false" :finished="finished[0]" @load="onLoad(0)">
          <order :o="o" :key="o.id" v-for="o in orders[0]"/>
        </list>
        <div class="text-center text-grey py-3">没有更多了...</div>
      </tab>
      <tab title="中奖订单">
        <list v-model="loading" :immediate-check="false" :finished="finished[1]" @load="onLoad(1)">
          <order :o="o" :key="o.id" v-for="o in orders[1]"/>
        </list>
        <div class="text-center text-grey py-3">没有更多了...</div>
      </tab>
      <tab title="待开奖订单">
        <list v-model="loading" :immediate-check="false" :finished="finished[2]" @load="onLoad(2)">
          <order :o="o" :key="o.id" v-for="o in orders[2]"/>
        </list>
        <div class="text-center text-grey py-3">没有更多了...</div>
      </tab>
    </tabs>
  </div>
</template>

<script>
import { CellGroup, List, Tab, Tabs } from 'vant'
import http from '../../http'
import Order from './order'

var types = ['all', 'winning', 'waiting']
var pages = [0, 0, 0]
var size = 15

export default {
  components: {Order, List, Tab, Tabs, CellGroup},
  name: 'orders',
  data: () => ({
    finished: [false, false, false],
    loading: false,
    orders: [],
    active: 0
  }),
  beforeRouteEnter (to, from, next) {
    var active = to.query.active || 0
    pages.fill(0)
    http.post('/user/bets', {size, page: pages[active]++}).then(orders => {
      next(vm => {
        vm.$set(vm.orders, active, orders)
        vm.active = active
      })
    })
  },
  beforeRouteUpdate (to, from, next) {
    var active = to.query.active || 0
    if (!this.orders[active]) {
      this.onLoad(active)
    }
    next()
  },
  methods: {
    change (idx) {
      this.$router.replace('/orders?active=' + idx)
    },
    onLoad (idx) {
      var page = ++pages[idx]
      var type = types[idx]
      this.loading = true
      http.post('/user/bets', {orderId: this.orderId, type, page, size}).then(orders => {
        var array = this.orders[idx]
        if (array) {
          this.orders[idx] = array.concat(orders)
        } else {
          this.$set(this.orders, idx, orders)
        }
        this.loading = false
        if (orders.length < size) {
          this.finished[idx] = true
        }
      })
    }
  }
}
</script>
